<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>

<!--
        作用域插槽
        <template v-slot:user="slotProps">
              v-slot:user  user 表示插槽的名字
        {{slotProps.user.username}}
           slotProps.user   ==>   v-bind:user

-->
<div id="app">
        <usr-info>
            <template #user="slotProps">
                    {{slotProps.usr.username}}
            </template>
<!--            <template v-slot:user="{usr:user}">-->
<!--                {{user.username}}-->
<!--            </template>-->
            <template v-slot:student="slotProps">
                {{slotProps.student.stuName}}
            </template>
        </usr-info>

<!--
    独占默认插槽的缩写语法    当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用。
    这样我们就可以把 v-slot 直接用在组件上
-->
<!--        <usr-info  v-slot:default="slotProps">-->
<!--                {{slotProps.user.username}}-->
<!--        </usr-info>-->
</div>

<script>

    let usrInfo = {
        template:`
           <div>
                <span>
                  <slot name="user" :usr="user">{{user.nickName}}</slot>
                  <slot name="student" v-bind:student="student">{{student.stuNo}}</slot>
                </span>
           </div>
        `,
        data: function (){
            return{
                user:{
                    username:'小明',
                    nickName:'明明'
                },
                student:{
                    stuName:'jack',
                    stuNo:'20241212001'
                }
            }
        }
    }

    let vm = new Vue({
        el:'#app',
        data:{},
        methods:{},
        components:{
            'usr-info':usrInfo
        }
      })
</script>
</body>
</html>